<template>
<!--    <div class= "container" >-->
<!--    <span>{{ $t('home.title') }}</span>-->
<!--    </div>-->
    <div class= "container">
        <h1>{{ $t('home.title') }}</h1>
        <p>{{ $t('home.log') }}{{username}}</p>
<!--        <div class="file-browser">-->
<!--            <div class="file-browser-header">-->
<!--                <h2>{{ $t('home.file') }}</h2>-->
<!--                <input type="text" v-model="search" placeholder="Search...">-->
<!--            </div>-->
<!--            <div class="file-browser-content">-->
<!--                <div v-for="file in filteredFiles" :key="file.id" class="file-item">-->
<!--                    <img :src="file.icon" alt="File icon">-->
<!--                    <span>{{file.name}}</span>-->
<!--                    <span>{{file.size}}</span>-->
<!--                </div>-->
<!--            </div>-->
<!--        </div>-->
    </div>
</template>

<script>
    export default {
        data() {
            return {
                username: "沪沪",
                search: "",
                // files: [
                //     { id: 1, name: "file1.txt", size: "2 KB", icon: "/icons/txt.png" },
                //     { id: 2, name: "file2.jpg", size: "1 MB", icon: "/icons/jpg.png" },
                //     { id: 3, name: "file3.pdf", size: "500 KB", icon: "/icons/pdf.png" },
                //     { id: 4, name: "file4.png", size: "2 MB", icon: "/icons/png.png" },
                //     { id: 5, name: "file5.doc", size: "1 MB", icon: "/icons/doc.png" },
                //     { id: 6, name: "file6.xls", size: "500 KB", icon: "/icons/xls.png" },
                //
                // ]
            }
        },
        computed: {
            filteredFiles() {
                if (!this.search) {
                    return this.files;
                }
                return this.files.filter(file => file.name.toLowerCase().includes(this.search.toLowerCase()));
            }
        }
    }
</script>

<style>
    .file-browser {
        width:900px;
        /*border: 1px solid #ddd;*/
        padding: 1rem;
    }

    .file-browser-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 1rem;
    }

    .file-browser-header input {
        padding: 0.5rem;
        border: 1px solid #ddd;
        border-radius: 0.25rem;
        flex: 1;
        margin-left: 1rem;
    }

    .file-browser-content {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: 1rem;
    }

    .file-item {
        display: flex;
        align-items: center;
        padding: 0.5rem;
        background-color: #f5f5f5;
        border-radius: 0.25rem;
    }

    .file-item img {
        width: 32px;
        margin-right: 0.5rem;
    }

    .file-item span:nth-child(2) {
        flex: 1;
        margin-right: 0.5rem;
    }

    .file-item span:last-child {
        font-size: 0.8rem;
        color: #aaa;
    }
</style>